<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        tr {
            text-align: center;
        }
        
        thead>tr {
            background-color: dodgerblue;
            ;
        }
        
        tbody>tr:nth-child(odd) {
            background-color: darkorange;
        }
        
        tbody>tr:nth-child(even) {
            background-color: deepskyblue;
        }
        
        caption {
            background-color: teal;
            ;
            color: yellowgreen
        }
    </style>
</head>

<body>
    <!-- cellspacing : 单元格与单元格之间的距离 -->
    <!-- cellpadding : 单元格内的边距 -->
    <!-- 
        cell : 单元格
        spacing : 行距，间隔，距离
        padding : 填充，内边距，统调
     -->
    <table border="0" width="300" height="200" align="center" cellspacing="0" cellpadding="0">
        <!-- 
            caption 表格标题 : 标题、字幕、说明，逮捕
            thead 定义表格头部
            tbody 定义表格主体
         -->
        <caption>Table 表格测试</caption>
        <thead>
            <!--
                tr 行标签
                td 列标签
                th 表头标签 --自动加粗、居中
            -->
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>行1.1</td>
                <td>行1.2</td>
                <td>行1.3</td>
                <td>行1.4</td>
            </tr>
            <tr>
                <td>行2.1</td>
                <td>行2.2</td>
                <td>行2.3</td>
                <td>行2.4</td>
            </tr>
            <tr>
                <td>行3.1</td>
                <td>行3.2</td>
                <td>行3.3</td>
                <td>行3.4</td>
            </tr>
            <tr>
                <td>行4.1</td>
                <td>行4.2</td>
                <td>行4.3</td>
                <td>行4.4</td>
            </tr>
        </tbody>
    </table>
    <br>
    <table border="1" width="300" height="200" align="center" cellspacing="0" cellpadding="0">
        <!-- 
            colspan 单元格跨列
            column:列、纵队、专栏、柱
            span:跨度、跨距、范围、持续、常用内敛容器
         -->
        <caption>Table 跨列</caption>
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">行1.1</td>
                <td>行1.2</td>
                <td>行1.3</td>
            </tr>
            <tr>
                <td>行2.1</td>
                <td colspan="2">行2.2</td>
                <td>行2.3</td>
            </tr>
            <tr>
                <td>行3.1</td>
                <td>行3.2</td>
                <td colspan="2">行3.3</td>
            </tr>
            <tr>
                <td colspan="4">行4.1</td>
            </tr>
        </tbody>
    </table>
    <br>
    <table border="1" width="300" height="200" align="center" cellspacing="0" cellpadding="0">
        <!-- 
            rowspan :跨行
            row:行、排、划船、街道、吵闹
         -->
        <caption>Table 跨列、跨行</caption>
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>行1.1</td>
                <td>行1.2</td>
                <td rowspan="2" colspan="2">行1.3</td>
            </tr>
            <tr>
                <td>行2.1</td>
                <td>行2.2</td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2">行3.1</td>
                <td>行3.3</td>
                <td>行3.4</td>
            </tr>
            <tr>
                <td>行4.3</td>
                <td>行4.4</td>
            </tr>
        </tbody>
    </table>
</body>

</html>